<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的动画</title>
		<script src="../vue@3.2.23.js"></script>
		<link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		  />
		<style>
			.content_box{
				width:200px;
				height:50px;
				line-height: 50px;
				background-color: bisque;
				text-align: center;
			}
			@keyframes move{
				20%{
					transform: translateX(-20px)
				}
				40%{
					transform: translateX(20px)
				}
				60%{
					transform: translateX(-20px)
				}
				80%{
					transform: translateX(20px)
				}
				100%{
					transform: translateX(0px)
				}
			}
			.animate{
				animation: move 0.8s linear;
			}
			.translation{
				transition: all 0.8s linear;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <div ref="firstDiv" class="content_box" :class="className" @animationend="className.animate=false" :style="style">我是第一个动画</div> -->
			<div class="but_box">
				<button @click="startMove($event)">
					切换动画1
				</button>
				<!-- <button @click="startMove($event)">
					切换动画2
				</button>
				<button @click="startMove($event)">
					切换动画3
				</button> -->
			</div>
			<!-- <transition enter-active-class="animate__animated animate__zoomIn">
				<div v-if="isShow" class="content">
					我是第六个动画
				</div>
			</transition> -->
			<transition enter-active-class="animate__animated animate__zoomIn">
				<div v-if="isShow" class="content">
					我是第七个动画
				</div>
			</transition>
		</div>
	</body>
</html>
<script>
	const app = Vue.createApp({
		data(){
			return{
				className:{'animate':false,translation:true},
				style:{
					'backgroundColor':'bisque'
				}
			}
		},
		methods:{
			startMove(e){
				const rect = e.target.getBoundingClientRect();
				console.log(this.$refs.firstDiv);
				this.startMove.animate = true;
				if(this.style.backgroundColor == 'bisque'){
					this.style.backgroundColor = 'red'
				}else{
					this.style.backgroundColor = 'bisque'
				}
			}
		}
	})
	const vm = app.mount('#app')
</script>